<template>
	<view class="piay">
		<view class="item" v-for="(item,index) in seniclist" @tap="toDetails(item.objectId)">
			<view class="pic">
				<image :src="item.img" mode=""></image>
			</view>
			<view class="msg">
				<view class="name">
					{{item.name}}
				</view>
				<view class="intro">
					{{item.intro}}
				</view>

			</view>
		</view>
	</view>

</template>
<script setup>
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import {
		ref
	} from 'vue'
	import {
		CONFIG
	} from "../../utils/config"


	const type = ref(1)

	onLoad(() => {
		getSenic()
	})

	const seniclist = ref([])
	async function getSenic() {
		let query = {
			"type": 1
		}

		let queryStr = JSON.stringify(query)
		console.log(query)
		console.log(queryStr);
		let res = await uni.$get(CONFIG.leanCloud_url + "/1.1/classes/senicitem", {
			where: queryStr
		})

		console.log(res);
		if (res.statusCode == 200) {
			seniclist.value = res.data.results
		}
		console.log(seniclist.value);
	}

	function toDetails(id) {
		uni.navigateTo({
			url: "/pages/playDetails/playDetails?id=" + id
		})
	}
</script>

<style>
	body{
		background-color: gainsboro;
	}
.piay {
  background-color: #fff; /* 背景颜色 */
  padding: 10px; /* 内边距 */
  
}

.item {
  display: flex; /* 使用flex布局 */
  /* align-items: center; */
  margin-bottom: 15px; /* 每个项目之间的间距 */
  border: 1px solid #ddd; /* 边框 */
  border-radius: 5px; /* 圆角 */
  overflow: hidden; /* 隐藏溢出内容 */
  height: 100px;
}

.pic {
  width: 100px; /* 图片宽度 */
  height: 100px; /* 图片高度 */
  margin-right: 10px; /* 图片与文字之间的间距 */
}

.pic image {
  width: 100%; /* 图片宽度占满容器 */
  height: 100%; /* 图片高度占满容器 */
  object-fit: cover; /* 图片覆盖容器，保持宽高比 */
}

.msg {
  flex: 1; /* 剩余空间由文字部分填充 */
}

.name {
  font-size: 18px; /* 名称字体大小 */
  font-weight: bold; /* 名称字体加粗 */
  color: #333; /* 名称字体颜色 */
}

.intro {
  font-size: 14px; /* 介绍字体大小 */
  color: #666; /* 介绍字体颜色 */
  margin-top: 5px; /* 介绍与名称之间的间距 */
}
</style>